<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../JQuery/jquery-3.6.0.min.js"></script>
		<title>AJAX的第一个网页</title>
		<!-- <script>//正确版
			$(function() {
				//注意这里用.链接
				$.ajax({
					type: "POST", //请求的方式
					url: "https://p.3.cn/prices/mgets", //交给哪个程序处理 要使用的请求路径
					contentType: "application/json;charset=utf-8", //请求时的数据的类型 text html jpg json
					
					data: {
						"skuIds": "J_100003717483"
					}, //要拼接的数据
					dataType: "jsonp", //服务器返回的数据的类型 text html jpg json
					success: function(data) {
						// $('#p1').text("返回数据：" + JSON.stringify(data));
						// $('#p2').text("商品编号：" + data[0].id);
						// $('#p3').text("商品价格： " + data[0].op);
						$('#p1').text("数据:"+JSON.stringify(data));
						$('#p2').text("编号:"+data[0].id);
						$('#p3').text("价格:"+data[0].op);
					}, //成功时运行
					error: function(data) {
						alert("SB"+JSON.stringify(data));
					}
				});
			});
		</script> -->
		<script>
			// function fff1() {//jquery代码不能写在文档就绪函数外或函数外，否则不能运行
			// 	$('#tt11').css("background-color", getColor());
			// }
			function fa2() {
				alert("???fa2");
			}
			$(function() {

				$('#tt11').mouseenter(function() {
					$('#tt11').css("background-color", getColor());
				})
				$('#tt11').mouseleave(function() {
					$('#tt11').css("background-color", getColor());
				})

				function getColor() {
					return "#" + Math.floor(Math.random() * 0xffffff).toString(16);
				}

				function fa1() { //普通函数写在文档就绪函数里面不能用html事件直接调用
					alert("???fa1");
				}



				$.ajax({
					type: "post",
					url: "https://p.3.cn/prices/mgets",
					contentType: "application/json;charset=utf-8",
					data: {
						"skuIds": "J_100003717483"
					},
					//jsonp(JSON with Padding) 是 json 的一种"使用模式"，
					//可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
					dataType: "jsonp",
					success: function(data) {
						console.log(data); //data是一个js数组对象
						$('#p1').text(JSON.stringify(data));
						$('#p2').text(data[0].id);
						$('#p3').text(data[0].op);
						$('#p4').text(data[0]);
						$('#tt11').text(JSON.stringify(data));
						console.log(JSON.stringify(data));
					},
					error: function(data) {
						alert(JSON.stringify(data));
					}
				})
			})
		</script>

		<!-- <script>
				$(function(){//文档就绪事件
					$.ajax({ //发起Ajax请求数据
						type: "POST",
						url: "https://p.3.cn/prices/mgets",
						contentType: "application/json;charset=utf-8",
						data: {		//拼接的参数
							"skuIds": "J_100003717483"
						},
						dataType: "jsonp",
						success: function(data) {	//返回的结果
		//[{"cbf":"0","id":"J_100003717483","m":"10000.00","op":"2499.00","p":"2099.00"}]
							$('#p1').text("返回数据：" + JSON.stringify(data));
							$('#p2').text("商品编号：" + data[0].id);
							$('#p3').text("商品价格： " + data[0].op);
						},
						error: function(data) {
							alert("提交失败" + JSON.stringify(data));
						}
					});
				});
			</script> -->

	</head>
	<body>
		<h5>Asynchronous Javascript And XML</h5>
		<p id="p1">这是p1</p>
		<p id="p2">这是p2</p>
		<p id="p3">这是p3</p>
		<p id="p4">这是p4</p>
		<div id="tt11" onclick="fff1();" style="color: #F0F8FF;font-size: 20px;">div1</div>
		<button onclick="fa1();">fa1</button>
		<button onclick="fa2();">fa2</button>

	</body>
</html>
